<template>
  <div class="count">
    <h2>我是count组件</h2>
    <p v-bgColor="'orange'">
      手机的价格是：{{ phonePrice | addPrice(2) | add$ }}
    </p>
    <p v-bgColor="'yellow'">姓名：{{ name }}</p>
    <p>年龄:{{ age }}</p>
    <p>性别:{{ sex }}</p>
    <button v-user="'admin'">登录</button>
    <button v-user="'admin'">注册</button>
    <button v-user="'superAdmin'">修改</button>
  </div>
</template>

<script>
export default {
  props: {
    count: Number,
    name: String,
    age: Number,
    sex: {
      type: String,
      //   required: true,
      default: "未填写...",
    },
  },
  data() {
    return {
      phonePrice: 4999,
    };
  },
  directives: {
    bgColor(el, binding) {
      el.style.background = binding.value;
    },
  },
};
</script>

<style scoped>
.count {
  background-color: pink;
}
</style>